<div class="row-fluid">
    <form action="#" method="POST" class="form-vertical" onsubmit="javascrit:return false;" name="ItemDespesa">
        <section id="sa-box-categoria">
            <div class="span12">
                <div class="control-group">
                    <label class="">Categoria</label>
                    <div class="controls">
                        <select name="data[Category][categorie_id]" id="sa-select-categorie_id" class="span12">
                            <option value="">SELECIONE</option>
                            <?php foreach($categores as $category):?>
                                <option value="<?php echo $category['Category']['id'];?>"><?php echo $category['Category']['name'];?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>
        </section>
        <section id="sa-box-despesas">
            <h4 class="text-center text-info span12">Selecione uma categoria.</h4>
        </section>
        <section class="span12 nomargin">
            <button class="btn btn-primary pull-right" id="sa-button-addItemDespesa" type="button">Adicionar <i class="icon-plus-sign"></i></button>
            <button class="btn pull-right" data-dismiss="modal" id="sa-button-cancelItemDespesa" type="button"><i class="icon-remove-sign"></i> Cancelar</button>
        </section>
        <input type="hidden" name="data[AccountsExpense][account_id]" value="" id="sa-input-AccountsExpence-account_id"/>
        <input type="hidden" name="data[AccountsExpense][situation_id]" id="sa-input-AccountsExpence-situation_id" value="2"/>
    </form>
</div>

<script type="text/javascript">
    $(function(){
        var http = location.protocol;
        var slaches = http.concat("//");
        var host = slaches.concat(window.location.hostname);
        var _pathApp = host.concat($('base').attr('href'));
        var i=0;
        $('#sa-select-expense_id').attr('disabled',true);
        $('#sa-input-valorItemDespesa').attr('disabled',true);
        $('#sa-select-categorie_id').change(function(){
            var category_id = $("#sa-select-categorie_id option:selected").val();
            if(category_id != '')
            {
                $.ajax({
                    type:'get',
                    url:_pathApp+'indexs/getExpenses/'+category_id,
                    beforeSend:function(){
                        $('#sa-box-despesas').html('');
                        $('#sa-box-despesas').html('<img src="'+_pathApp+'/img/loading_48.GIF">');
                    },
                    success:function(data){
                        if(data != '')
                        {
                            $('#sa-box-despesas').html('');
                            $('#sa-box-despesas').html(data);
                        }
                    },
                    error:function(){},
                    complete:function(){
                        $('#sa-loading').html('');
                    }
                });
            }
            else
            {
                $('#sa-box-despesas').html('');
                $('#sa-box-despesas').html('<h4 class="text-center text-info span12">Selecione uma categoria.</h4>');
            }
        });
        $('#sa-button-addItemDespesa').click(function(){
            var total_saldo = 0;
            var account_id = $('#sa-input-Account-Accouunt_id').val();
            // pega o valor da despesa atual.
            var valor_total = $('#sa-valueTotalDespesa').attr('data-value');
            $('#value-custo').html('');
            $('#value-custo').html(valor_total);
            // pega o valor do saldo atual
            var valor_saldoAtual = parseFloat($("#sa-li-saldo #value-saldo").attr('data-value'));
            // pega o valor do custo atual
            var valor_custoAtual = parseFloat($("#sa-li-custo #value-custo").attr('data-value'));
            //pega o valor do data-count do ultimo item inserido e incrementa
            var count_itemDespesa = $('#sa-list-ItensDespesa').attr('data-count');
            var count_itemDespesa = parseInt(count_itemDespesa) +1;
            // pega o tipo de despesa atual.
            var tipo_despesa = $('#sa-select-expense_id option:selected').html();
            // paga o valor digitado para um despesa expecifica.
            var valor_despesa = $('#sa-input-valorItemDespesa').val();
            // substitue a virgula pelo ponto no valor_despesa.
            var valor_despesa = valor_despesa.replace(',','.');
            if(valor_despesa != '' && isNaN(valor_despesa) == false)
            {
                // converte o valor da variavel valor_total e
                // valor_despesa para float e soma os mesmo.
                var total = parseFloat(valor_total)+parseFloat(valor_despesa);
                var total_saldoAtual = valor_saldoAtual - parseFloat(valor_despesa);

                var formItemDespesa = $('form[name="ItemDespesa"]').serialize();
                formItemDespesa += '&data[Account][cost]='+total;
                formItemDespesa += '&data[Account][id]='+account_id;
                formItemDespesa += '&data[Account][balance]='+total_saldoAtual;
                $.ajax({
                    type:'post',
                    url:_pathApp+'indexs/saveItensDespesas',
                    data:formItemDespesa,
                    beforeSend:function(){

                    },
                    success:function(data){
                        data = data.split('|');
                        if(data[0] == 1)
                        {
                            $('#sa-list-ItensDespesa').attr('data-count',count_itemDespesa);
                            // adiciona um linha na tela de listagem de item despesas.
                            $('#sa-list-ItensDespesa').append('<li><div class="check"><input type="checkbox" class="icheck-me" value="'+valor_despesa+'" id="sa-checkbox-ItemDespeda'+count_itemDespesa+'" data-skin="square" data-color="blue" name="data[AccountsExpense][situation_id]" onclick="pagarItemDespesa('+count_itemDespesa+');" data-value="'+data[1]+'" ></div><span class="task"><span>'+tipo_despesa+'</span> - R$ '+valor_despesa+'</span><span class="task-actions"><a href="#" class="task-delete" id="sa-link-deleteItemDespesa" onclick="deleteItemDespesa('+count_itemDespesa+')" rel="tooltip" title="Delete that task"><i class="icon-remove"></i></a></span></li>');
                            // limpar o campo do de valor despesas
                            $('#sa-input-valorItemDespesa').val('');
                            // seleciona a opção do select em que o valor seja vazio.
                            $('#sa-select-expense_id option[value=""]').attr('selected',true);

                            total_saldo = valor_saldoAtual - parseFloat(valor_despesa);
                            $("#sa-li-saldo #value-saldo").html(total_saldoAtual);
                            $("#sa-li-saldo #value-saldo").attr('data-value',total_saldoAtual);

                            $("#sa-li-custo #value-custo").html(total);
                            $("#sa-li-custo #value-custo").attr('data-value',total);

                            $('#sa-valueTotalDespesa').attr('data-value','');
                            $('#sa-valueTotalDespesa').attr('data-value',total);
                            $('#sa-valueTotalDespesa').html('');
                            $('#sa-valueTotalDespesa').html(total);
                        }
                    },
                    error:function(){},

                    complete:function(){
                        $('#sa-loading').html('');
                    }
                });
            }
            else
            {
                alert('Informe um valor para esta despesa.');
                $('#sa-input-valorItemDespesa').val('');
            }
        });
    });
</script>